"use client";

import { Badge } from "@/components/ui/badge";
import { Image as ImageIcon, Text as TextIcon } from "lucide-react";

const TypeIcon = ({ type }: { type: "text" | "image" }) => {
  if (type === "image") {
    return <ImageIcon className="w-3 h-3" />;
  }
  return <TextIcon className="w-3 h-3" />;
};

interface TypeBadgeProps {
  itemType: "text" | "image";
  isDetailed?: boolean; // To handle different styling/width if needed
}

export const TypeBadge = ({ itemType }: TypeBadgeProps) => {
  const baseClasses =
    "px-0 flex border-none justify-center items-center text-xs";
  const widthClass = "w-5"; // cv-node uses auto, detail-display uses w-12

  const typeText = itemType === "text" ? "" : "";
  const colorClasses =
    itemType === "text"
      ? "bg-slate-600 text-slate-200" // cv-node style
      : "bg-emerald-600 text-emerald-200"; // cv-node style

  return (
    <Badge
      variant="outline"
      className={`${baseClasses} ${widthClass} ${colorClasses}`}
    >
      <TypeIcon type={itemType} />
      {typeText}
    </Badge>
  );
};

// Status badge component
export const StatusBadge = ({
  variant = "idle",
  children,
}: {
  variant?: "idle" | "running" | "success" | "failed";
  children: React.ReactNode;
}) => {
  const baseStyle =
    "px-2.5 py-1 text-xs font-semibold rounded-full inline-flex items-center";
  let statusStyle = "";

  switch (variant) {
    case "running":
      statusStyle = "bg-blue-500 text-white";
      break;
    case "success":
      statusStyle = "bg-green-500 text-white";
      break;
    case "failed":
      statusStyle = "bg-red-500 text-white";
      break;
    case "idle":
    default:
      statusStyle = "bg-gray-500 text-white";
      break;
  }

  return <span className={`${baseStyle} ${statusStyle}`}>{children}</span>;
};
